<template>
  <Async_linr_part :Arr="info" @gz="gz" title="我关注的" :gzfalg="gzfalg" />
  <!-- 消息提示 -->
  <Async_message_part :flag="flag" :title="title" />
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
// li内容组件
const Async_linr_part = defineAsyncComponent(() => import('../components/common/message-page.vue'))
// 消息提示
const Async_message_part = defineAsyncComponent(() => import('../components/common/message-part.vue'))
import { getInterestListAPI, getInterestListGZAPI } from '../api/InterestList-page';
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
// 粉丝
const info = ref([])
const flag = ref(false)
const title = ref('')
const gzfalg = ref(false)
init()
async function init() {
  let res = await getInterestListAPI(myId)
  info.value = res.data.data
  info.value.forEach((item) => {
    item.gzfalg = false
  })
  console.log(info.value, '我关注的');
}
// 关注
async function gz(val) {
  info.value.forEach((item) => {
    if (item.userId === val) {
      console.log(item);
      item.gzfalg = !item.gzfalg
    }
  })
  let res = await getInterestListGZAPI(myId, val)
  console.log(res);
  if (res.data.code === 200) {
    Timeout(res.data.data)
  }
}
// Message组件简便方法
function Timeout(t) {
  flag.value = true
  title.value = t + '~'
  setTimeout(() => {
    flag.value = false
    title.value = ''
  }, 1000)
}
</script>

<style lang="scss" scoped></style>